<!--  -->
<template>
  <div class="collapse-logo-setup">
    <el-form :model="form" v-loading="loading">
      <el-form-item label="展示方式" :label-width="formLabelWidth">
        <el-radio v-model="form.type" :label="0">不显示</el-radio>
        <el-radio v-model="form.type" :label="1">文字显示</el-radio>
        <el-radio v-model="form.type" :label="2">图片显示</el-radio>
      </el-form-item>
      <!-- 文字显示 -->
      <div v-if="form.type === 1">
        <el-form-item label="文字Logo" :label-width="formLabelWidth" class="requireStar">
          <el-input v-model="form.title" size="medium" placeholder="请输入内容" maxlength="20" style="width:50%;"></el-input>
        </el-form-item>
        <el-form-item label="字体大小" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.tConf.fontSize" size="medium" style="width:50%;"></el-input> -->
          <el-select size="medium" v-model="form.slogconfig.config.fontSize" placeholder="请选择" style="width:50%;">
            <el-option :label="'默认'" :value="''"></el-option>
            <el-option :label="'1em'" :value="'1em'"></el-option>
            <el-option :label="'1.1em'" :value="'1.1em'"></el-option>
            <el-option :label="'1.2em'" :value="'1.2em'"></el-option>
            <el-option :label="'1.3em'" :value="'1.3em'"></el-option>
            <el-option :label="'1.4em'" :value="'1.4em'"></el-option>
            <el-option :label="'1.5em'" :value="'1.5em'"></el-option>
            <el-option :label="'1.6em'" :value="'1.6em'"></el-option>
            <el-option :label="'1.7em'" :value="'1.7em'"></el-option>
            <el-option :label="'1.8em'" :value="'1.8em'"></el-option>
            <el-option :label="'1.9em'" :value="'1.9em'"></el-option>
            <el-option :label="'12px'" :value="'12px'"></el-option>
            <el-option :label="'14px'" :value="'14px'"></el-option>
            <el-option :label="'16px'" :value="'16px'"></el-option>
            <el-option :label="'18px'" :value="'18px'"></el-option>
            <el-option :label="'20px'" :value="'20px'"></el-option>
            <el-option :label="'22px'" :value="'22px'"></el-option>
            <el-option :label="'28px'" :value="'28px'"></el-option>
            <el-option :label="'32px'" :value="'32px'"></el-option>
            <el-option :label="'36px'" :value="'36px'"></el-option>
            <el-option :label="'42px'" :value="'42px'"></el-option>
            <el-option :label="'48px'" :value="'48px'"></el-option>
            <el-option :label="'52px'" :value="'52px'"></el-option>
            <el-option :label="'64px'" :value="'64px'"></el-option>
            <el-option :label="'72px'" :value="'72px'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色" :label-width="formLabelWidth" style="margin-bottom:0;">
          <el-color-picker v-model="form.slogconfig.config.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="是否加粗" :label-width="formLabelWidth">
          <el-radio v-model="form.slogconfig.config.fontWeight" size="small" :label="'normal'">不加粗</el-radio>
          <el-radio v-model="form.slogconfig.config.fontWeight" size="small" :label="'bolder'">加粗</el-radio>
        </el-form-item>
      </div>
      <!-- 图片显示 -->
      <div v-if="form.type === 2">
        <el-form-item label="图片Logo" :label-width="formLabelWidth" class="requireStar">
          <div>
            <img style="max-width:500px;max-height:180px;cursor:pointer; background:#e0e0e0;" @click.stop="clickLogo"
              :key="form.src" v-lazy="form.src" alt="logo">
          </div>
        </el-form-item>
        <el-form-item label="图片alt属性" :label-width="formLabelWidth">
          <el-input v-model="form.slogconfig.img.alt" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;">
          </el-input>
        </el-form-item>
        <el-form-item label="图片title属性" :label-width="formLabelWidth">
          <el-input v-model="form.slogconfig.img.title" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="group-button">
      <el-button type="primary" @click="onSubmitData" size="small">更 新</el-button>
    </div>
    <!-- 选择图片 -->
    <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import ImagesEmpty from '@/assets/images/image-empty.png'
import * as functions from '@/core/functions.js'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
export default {
  created () {
    this.show()
  },
  computed: {
  },
  data () {
    return {
      loading: true,
      formLabelWidth: '120px',
      form: {
        type: 1,
        title: '',
        src: '',
        repertoryId: '',
        slogconfig: defaultLogoConfigData()
      }
    }
  },
  methods: {
    show () {
      this.loading = true
      this.$post('/baseinfo/render-info', null).then(response => {
        if (response && response.slogo) {
          this.form = initForm(JSON.parse(JSON.stringify(this.form)), response)
        }
        this.loading = false
      })
    },
    clickLogo () {
      this.$refs['chooseImage'].show({ title: '选择站点Logo图片', where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.map(item => {
            let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            this.form.src = functions.getRepertoryImageSrc(repertoryImageSrc)
            this.form.repertoryId = item.id
          })
        }
      })
    },
    // 请求后台
    onSubmitData () {
      this.loading = true
      if (this.form.type === 2 && this.form.src === ImagesEmpty) {
        this.$message.error('图片logo不能为空！')
        this.loading = false
        return
      }
      if (this.form.type === 1 && (this.form.title === '' || this.form.title.trim() === '')) {
        this.$message.error('文字logo不能为空！')
        this.loading = false
        return
      }
      this.form.slogconfig.type = this.form.type
      this.form.slogconfig.title = this.form.title
      let param = {
        type: this.form.type,
        title: this.form.title,
        repertoryId: this.form.repertoryId,
        config: JSON.stringify(this.form.slogconfig)
      }
      this.$jpost('/baseinfo/save-info', param).then(response => {
        if (response && response.slogo) {
          this.form = initForm(JSON.parse(JSON.stringify(this.form)), response)
          this.loading = false
        }
      })
    }
  },
  components: {
    ChooseRepertory
  }
}

function initForm (form, response) {
  form.type = parseInt(response.slogo.type)
  form.title = response.slogo.title
  if (response.repertoryQuote) {
    let hrepertory = response.repertoryQuote.hrepertory
    form.src = functions.getRepertoryImageSrcByHostRepertory(hrepertory)
    form.repertoryId = hrepertory.id
  } else {
    form.src = ImagesEmpty
    form.repertoryId = 0
  }
  let allConfig = response.slogo.config ? JSON.parse(response.slogo.config) : defaultLogoConfigData()
  if (!allConfig || !allConfig.img) {
    allConfig = defaultLogoConfigData()
  }
  if (allConfig && allConfig.img && allConfig.img.src) {
    allConfig.img.src = ''
  }
  form.slogconfig = allConfig
  return form
}

function defaultLogoConfigData () {
  return {
    type: 0,
    title: '智能建站',
    theme: 'default',
    img: {
      alt: '',
      src: '',
      title: ''
    },
    config: {
      color: '',
      fontSize: '',
      fontWeight: 'normal'
    }
  }
}
</script>

<style scoped>
.collapse-logo-setup .group-button {
  text-align: left;
  margin-left: 120px;
}
.collapse-logo-setup /deep/ .el-form-item {
  margin-bottom: 15px;
}
.requireStar /deep/ .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
